<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active{
            background: red;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>开始学习路由啦</h1>
        <button @click="enterNews">跳转到news</button>
        <hr>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        let Home = {
            template:`
                <h1> home组件 </h1>
            `,
            mounted(){
                // $route 路由 自动 加到 Vue的原型上  保存 当前路由 基本信息如 地址 参数...,.
                console.log(this.$route)
            }
        }
        let News = {
            template:`
                <h1> news组件 </h1>
            `,
            mounted(){
                // $route 路由 自动 加到 Vue的原型上  保存 当前路由 基本信息如 地址 参数...,.
                console.log(this.$route)
            }
        }
        const routes = [
            {
                path:"/",
                redirect:"/home"
            },
            {
                path:"/home",
                name:"home",
                component:Home
            },
            {
                path:"/news",
                name:"news",
                component:News
            }
        ];
        const router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el:"#app",
            methods:{
                enterNews(){
                    // this.$router.push("/news")
                    // this.$router.push({name:'news'})
                   /*  this.$router.push({
                        name:'news',
                        params:{
                            id:11
                        }
                    }) */
                    this.$router.push({
                        path:"/news",
                        query:{
                            id1:1,
                            id2:2
                        }
                    })
                }
            },
            router
        })
        /* 
            to属性 值
                1， 字符串  直接写跳转的路径
                router-link to="/news"
                2，对象
                router-link :to="{name:'home'}"

         */
    </script>
</body>
</html>